<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = ['red', 'blue', 'pink']

    // 1.数组map方法
    // map可以遍历数组 处理数据，并且 返回新的数组
    const newArr = arr.map(function (ele, index) {
      // console.log(ele)
      // console.log(index)
      return ele + '颜色'
    })
    console.log(newArr)  // ['red颜色', 'blue颜色', 'pink颜色']

    // 2.数组join方法  把数组转化为字符串
    // join()方法用于把数组中的所有元素转换成 一个字符串
    // const arr = ['red颜色', 'blue颜色', 'pink颜色']
    // 语法：console.log(arr.join(''))  // --> red颜色blue颜色pink颜色
    // 参数：数组元素是通过参数里面指定的分隔符进行分隔的，空字符串('')，则所有元素之间都没有任何字符串
    // 小括号为空则逗号分隔
    console.log(newArr.join())  //red颜色,blue颜色,pink颜色
    console.log(newArr.join(''))  //red颜色blue颜色pink颜色
    console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色
    console.log(newArr.join('+'))  //red颜色+blue颜色+pink颜色
  </script>
</body>

</html>